<template>
  <lam-dialog :visible.sync="visible" title="修改头像" :close-on-click-modal="false" width="800px" >
    <div style="margin-bottom: 10px;">可选头像：</div>
    <div style="margin-bottom: 20px;">
      <span v-for="(item, key) in selectList" :key="key" @click="selectAvatar('/static/avatars/'+item)">
        <el-avatar :size="64" :src="'/static/avatars/'+item" style="margin-left: 15px;box-shadow: 0 0 4px #ccc;cursor: pointer;"/>
      </span>

    </div>
    <el-row>
      <el-col :xs="24" :md="12" :style="{height: '350px'}">
        <vueCropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType"
            :info="option.info"
            :canScale="option.canScale"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixedBox="option.fixedBox"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :full="option.full"
            :enlarge="option.enlarge"
            :mode="option.mode"
            @realTime="realTime"
            @cropMoving="cropMoving" />
      </el-col>
      <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <div :style="previewStyle" class="avatar-upload-preview">
            <div :style="previews.div">
              <img :src="previews.url" :style="previews.img" >
            </div>
          </div>
      </el-col>
    </el-row>

    <template slot="footer">
      <el-upload style="display: inline;" name="file" action="/" :multiple="false" :on-change="handleChange" accept=".jpg,.png,.jpeg" :show-file-list="false" :auto-upload="false">
         <el-button slot="trigger" type="primary" icon="el-icon-upload" style="margin-right: 15px;">选择图片</el-button>
      </el-upload>
      <el-button @click="close" icon="el-icon-close">取 消</el-button>
      <el-button type="primary" :loading="confirmLoading" icon="el-icon-check" @click="okHandel">保 存</el-button>
    </template>
  </lam-dialog>
</template>
<script>
  import { VueCropper } from 'vue-cropper'

  export default {
    name:'AvatarSelect',
    components: {
      VueCropper
    },
    data() {
      return {
        visible: false,
        confirmLoading: false,
        option: {
          img: '/static/avatars/a0.jpg', // 裁剪图片的地址 url 地址, base64, blob
          outputSize: 1, // 裁剪生成图片的质量
          outputType: 'png', // 裁剪生成图片的格式 jpeg, png, webp
          info: true, // 裁剪框的大小信息
          canScale: true, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 200, // 默认生成截图框宽度
          autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: false, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
          canMove: true, // 上传图片是否可以移动
          canMoveBox: true, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          full: true, // 是否输出原图比例的截图
          enlarge: '1', // 图片根据截图框输出比例倍数
          mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto
        },
        selectList:['0.jpg', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png'],
        previews: {},
        previewStyle:{}
      };
    },
    methods: {
      show(op) {
        Object.assign(this.option, op)
        if (op.success && op.success instanceof Function) {
          this.success = obj.success
        }
        this.visible = true
      },
      okHandel() {
        // 获取截图的数据
        this.$refs.cropper.getCropData(data => {
          this.$emit('ok', data);
          this.close()
        })
        // this.$refs.cropper.getCropBlob(data => {
        // })
      },
      selectAvatar(img){
        this.option.img = img;
      },
      async handleChange(file) {
        this.option.img = await this.getBase64(file.raw);
      },
      close() {
        this.visible = false;
      },
      cropMoving(data){
      },
      realTime(data) {
        this.previews = data;
        this.previewStyle = {
          width: data.w + "px",
          height: data.h + "px",
          overflow: "hidden",
          margin: "0",
          zoom: 200 / data.h
        };
      },
      getBase64(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
        });
      }
    }
  };
</script>

<style lang="less" scoped>
  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: #82848a 0px 0px 4px;
    overflow: hidden;
  }
</style>
